<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>three.js examples</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="shortcut icon" href="./resources/files/favicon_white.ico" media="(prefers-color-scheme: dark)" />
    <link rel="shortcut icon" href="./resources/files/favicon.ico" media="(prefers-color-scheme: light)" />
    <link rel="stylesheet" type="text/css" href="./resources/files/main.css">
</head>

<body>

    <div id="panel">

        <div id="header">
            <h1> <a href="https://feng3d.com">feng3d</a> </h1>
            <h1> <a href="https://gitee.com/feng3d/feng3d-three">源码</a> </h1>
            <h1> <a href="https://feng3d.com/feng3d-three/docs">docs</a> </h1>

            <div id="sections">
                <span class="selected">examples</span>
            </div>

            <div id="expandButton"></div>
        </div>

        <div id="panelScrim"></div>

        <div id="contentWrapper">

            <div id="inputWrapper">
                <input placeholder="" type="text" id="filterInput" autocorrect="off" autocapitalize="off"
                    spellcheck="false" />
                <div id="clearSearchButton"></div>
            </div>

            <div id="content">
                <img id="previewsToggler" src="./resources/files/thumbnails.svg" width="20" height="20" />
            </div>
        </div>

    </div>

    <iframe id="viewer" name="viewer" allow="fullscreen; xr-spatial-tracking;"></iframe>

    <a id="button" target="_blank"><img src="./resources/files/ic_code_black_24dp.svg"></a>

    <template id="PlaceholderHTML">
        <!DOCTYPE html>
        <html lang="en">

        <head>
            <meta charset="utf-8">
            <title>three.js examples</title>
            <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
            <link rel="stylesheet" type="text/css" href="./resources/files/main.css">
            <style>
                html,
                body {
                    height: 100%;
                }

                body {
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    user-select: none;
                }
            </style>
        </head>

        <body>
            Select an example from the sidebar
        </body>

        </html>
    </template>

    <script type="module" src="index.ts"></script>
</body>

</html>